<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Example: Linked message with message function</title>
    <script src="../../../node_modules/vue/dist/vue.global.js"></script>
    <script src="../../../packages/vue-i18n/dist/vue-i18n.global.js"></script>
  </head>
  <body>
    <div id="app">
      <form>
        <label for="locale-select">{{ $t('message.language') }}</label>
        <select id="locale-select" v-model="$i18n.locale">
          <option value="en">en</option>
          <option value="ja">ja</option>
        </select>
      </form>
      <p class="linked">{{ $t('message.linked') }}</p>
      <label>{{ $t('message.homeAddress') }}</label>
      <p class="error">{{ $t('message.missingHomeAddress') }}</p>
      <p class="modifier">
        {{ $t('message.custom_modifier', { snake: 'message.snake' }) }}
      </p>
    </div>
    <script>
      const { createApp } = Vue
      const { createI18n } = VueI18n

      const i18n = createI18n({
        locale: 'en',
        messages: {
          en: {
            message: {
              language: 'Language',
              the_world: 'the world',
              dio: 'DIO:',
              // '@:message.dio @:message.the_world !!!!'
              linked: ({ linked }) =>
                `${linked('message.dio')} ${linked('message.the_world')} !!!!`,
              homeAddress: 'Home address',
              // 'Please provide @.lower:message.homeAddress'
              missingHomeAddress: ({ linked }) =>
                `Please provide ${linked('message.homeAddress', 'lower')}`,
              snake: 'snake case',
              // "custom modifiers example: @.snakeCase:{'message.snake'}"
              custom_modifier: ({ linked }) =>
                `custom modifiers example: ${linked(
                  'message.snake',
                  'snakeCase'
                )}`
            }
          },
          ja: {
            message: {
              language: '言語',
              the_world: 'ザ・ワールド',
              dio: 'ディオ:',
              // '@:message.dio @:message.the_world ！！！！'
              linked: ({ linked }) =>
                `${linked('message.dio')} ${linked(
                  'message.the_world'
                )} ！！！！`,
              homeAddress: 'ホームアドレス',
              // 'どうか、@.lower:message.homeAddress を提供してください。'
              missingHomeAddress: ({ linked }) =>
                `どうか、${linked(
                  'message.homeAddress',
                  'lower'
                )} を提供してください。`,
              snake: 'スネーク ケース',
              // "カスタム修飾子の例: @.snakeCase:{'message.snake'}"
              custom_modifier: ({ linked }) =>
                `カスタム修飾子の例: ${linked('message.snake', 'snakeCase')}`
            }
          }
        },
        modifiers: {
          snakeCase: str => str.split(' ').join('-')
        }
      })

      const app = createApp({})
      app.use(i18n)
      app.mount('#app')
    </script>
  </body>
</html>
